<template>
  <div class="membership-container">
    <!-- 顶部导航栏 -->
    <div class="navbar">
      <div class="navbar-content">
        <div class="logo">小白盒</div>
        <div class="nav-links">
          <router-link to="/" class="nav-link">首页</router-link>
          <router-link to="#" class="nav-link">游戏库</router-link>
          <router-link to="#" class="nav-link">社区</router-link>
          <router-link to="#" class="nav-link">攻略</router-link>
          <router-link to="#" class="nav-link">直播</router-link>
          <router-link to="#" class="nav-link">活动</router-link>
          <router-link to="#" class="nav-link">商城</router-link>
          <router-link to="#" class="nav-link">排行榜</router-link>
          <router-link to="#" class="nav-link">下载</router-link>
        </div>
        <div class="user-actions">
          <router-link to="#" class="btn-create">发布动态</router-link>
          <span class="vip-tag">会员</span>
          <div class="avatar">👤</div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 会员特权介绍 -->
    <section class="privileges-section">
      <div class="section-header">
        <h1>小白盒游戏会员</h1>
        <p>游戏玩家的终极特权中心</p>
      </div>
        <div class="privileges-grid">
          <div class="privilege-item">
            <div class="privilege-icon">🔥</div>
            <div class="privilege-title">热门游戏抢先体验</div>
            <div class="privilege-desc">会员可提前7天体验平台新上线的热门游戏大作</div>
          </div>
          <div class="privilege-item">
            <div class="privilege-icon">💰</div>
            <div class="privilege-title">游戏购物专属折扣</div>
            <div class="privilege-desc">所有游戏及游戏内商品享受9折优惠，独家捆绑包低至7折</div>
          </div>
          <div class="privilege-item">
            <div class="privilege-icon">🎮</div>
            <div class="privilege-title">独家游戏礼包</div>
            <div class="privilege-desc">每月领取精选游戏礼包，包含稀有皮肤、限定道具和游戏币</div>
          </div>
          <div class="privilege-item">
            <div class="privilege-icon">💎</div>
            <div class="privilege-title">游戏VIP标识</div>
            <div class="privilege-desc">在游戏社区中展示尊贵会员标识，发布内容获得更多曝光</div>
          </div>
          <div class="privilege-item">
            <div class="privilege-icon">🎁</div>
            <div class="privilege-title">生日游戏礼物</div>
            <div class="privilege-desc">会员生日当月可领取专属游戏礼物，包含付费游戏或高级道具</div>
          </div>
          <div class="privilege-item">
            <div class="privilege-icon">🛒</div>
            <div class="privilege-title">免运费特权</div>
            <div class="privilege-desc">游戏周边商城购物全场免运费，优先发货特权</div>
          </div>
        </div>
      </section>

      <!-- 会员专享游戏 -->
      <section class="games-carousel-section">
        <div class="section-title">
          <h2>会员专享游戏</h2>
          <p>精品游戏抢先体验，会员优先畅玩</p>
        </div>
        <div class="games-carousel">
          <button class="carousel-arrow left" @click="prevGame">←</button>
          <div class="carousel-container">
            <div class="game-slide" :style="{ transform: `translateX(-${currentGame * 100}%)` }">
              <div class="game-card" v-for="(game, index) in games" :key="index">
                <div class="game-image-container">
                  <img :src="game.image" :alt="game.name" class="game-image" />
                  <div class="game-overlay">
                    <p class="game-comment">{{ game.comment }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button class="carousel-arrow right" @click="nextGame">→</button>
        </div>
      </section>

      <!-- 年度会员专享福利 -->
      <section class="annual-benefits-section">
        <div class="section-title">
          <h2>年度会员专享福利</h2>
          <p>现在购买年度会员，可免费获得一款价值99元的热门游戏，并选择一款精美的游戏周边</p>
        </div>
        <div class="benefits-content">
          <div class="book-selection">
            <div class="book-card">
              <div class="book-icon">兑换</div>
              <div class="book-desc">99元以下<br>游戏任选</div>
              <div class="book-plus">+</div>
            </div>
          </div>
          <div class="gifts-selection">
            <div class="gift-item">
              <div class="gift-image">🎮</div>
              <div class="gift-name">游戏手柄</div>
            </div>
            <div class="gift-item">
              <div class="gift-image">🎯</div>
              <div class="gift-name">游戏徽章</div>
            </div>
            <div class="gift-item">
              <div class="gift-image">🎨</div>
              <div class="gift-name">游戏主题T恤</div>
            </div>
            <div class="gift-item">
              <div class="gift-image">🎲</div>
              <div class="gift-name">游戏鼠标垫</div>
            </div>
            <div class="gift-item">
              <div class="gift-image">🧸</div>
              <div class="gift-name">游戏角色手办</div>
            </div>
          </div>
        </div>
      </section>

      <!-- 游戏攻略大师课VIP免费学 -->
      <section class="bytecourse-section">
        <div class="section-title">
          <h2>游戏攻略大师课VIP免费学</h2>
          <p>由资深游戏玩家和职业选手精心打造的游戏攻略课程，VIP会员可免费学习所有内容，快速提升游戏技巧</p>
          <a href="#" class="view-more">查看全部攻略课程 →</a>
        </div>
        <div class="courses-slider">
          <button class="slider-arrow left">←</button>
          <div class="courses-container">
            <div class="course-card">
              <div class="course-image">⚔️</div>
              <div class="course-title">艾尔登法环</div>
              <div class="course-subtitle">全BOSS速通攻略</div>
              <div class="course-instructor">讲师：游戏大神</div>
            </div>
            <div class="course-card">
              <div class="course-image">🚀</div>
              <div class="course-title">赛博朋克2077</div>
              <div class="course-subtitle">隐藏任务全收集</div>
              <div class="course-instructor">讲师：夜之城向导</div>
            </div>
            <div class="course-card">
              <div class="course-image">🎯</div>
              <div class="course-title">射击游戏</div>
              <div class="course-subtitle">枪法精准训练</div>
              <div class="course-instructor">讲师：职业选手</div>
            </div>
            <div class="course-card">
              <div class="course-image">🎮</div>
              <div class="course-title">动作游戏</div>
              <div class="course-subtitle">连招技巧精通</div>
              <div class="course-instructor">讲师：格斗大师</div>
            </div>
            <div class="course-card">
              <div class="course-image">🧩</div>
              <div class="course-title">解谜游戏</div>
              <div class="course-subtitle">思维训练</div>
              <div class="course-instructor">讲师：解谜专家</div>
            </div>
          </div>
          <button class="slider-arrow right">→</button>
        </div>
      </section>

      <!-- 游戏DLC与皮肤7折 -->
      <section class="dlc-discount-section">
        <div class="section-title">
          <h2>游戏DLC与皮肤7折</h2>
          <p>会员有效期内购买所有游戏DLC、皮肤和虚拟道具，可享受全场7折优惠</p>
          <a href="#" class="view-more">查看全部商品 →</a>
        </div>
        <div class="dlc-slider">
          <button class="slider-arrow left">←</button>
          <div class="dlc-container">
            <div class="dlc-item">
              <div class="dlc-image">🎭</div>
              <div class="dlc-title">赛博朋克2077 夜之城传奇套装</div>
              <div class="dlc-tag">皮肤</div>
              <div class="dlc-vip-tag">VIP免费</div>
            </div>
            <div class="dlc-item">
              <div class="dlc-image">🔥</div>
              <div class="dlc-title">艾尔登法环 黄金树之影DLC</div>
              <div class="dlc-tag">DLC</div>
              <div class="dlc-vip-tag">VIP免费</div>
            </div>
            <div class="dlc-item">
              <div class="dlc-image">🏆</div>
              <div class="dlc-title">死亡搁浅 导演剪辑版升级包</div>
              <div class="dlc-tag">DLC</div>
              <div class="dlc-vip-tag">VIP免费</div>
            </div>
            <div class="dlc-item">
              <div class="dlc-image">⚡</div>
              <div class="dlc-title">超级英雄 限定皮肤礼包</div>
              <div class="dlc-tag">皮肤</div>
              <div class="dlc-vip-tag">VIP免费</div>
            </div>
            <div class="dlc-item">
              <div class="dlc-image">🎯</div>
              <div class="dlc-title">射击游戏 武器皮肤合集</div>
              <div class="dlc-tag">皮肤</div>
              <div class="dlc-vip-tag">VIP免费</div>
            </div>
          </div>
          <button class="slider-arrow right">→</button>
        </div>
      </section>

      <!-- 常见问题 -->
      <section class="faq-section">
        <div class="section-title">
          <h2>常见问题</h2>
        </div>
        <div class="faq-list">
          <div class="faq-item">
            <div class="faq-question">
              Q1: 会员可以提前体验哪些游戏？
              <span class="faq-toggle">→</span>
            </div>
            <div class="faq-answer">
              小白盒会员可以提前7天体验平台新上线的所有热门游戏大作，包括独立游戏和3A大作，具体游戏列表会在首页和会员中心更新。
            </div>
          </div>
          <div class="faq-item">
            <div class="faq-question">
              Q2: 如何领取每月的游戏礼包？
              <span class="faq-toggle">→</span>
            </div>
            <div class="faq-answer">
              会员每月可在"我的福利"页面领取当月游戏礼包，礼包内容每月更新，包含稀有皮肤、限定道具和游戏币等福利。
            </div>
          </div>
          <div class="faq-item">
            <div class="faq-question">
              Q3: 购买年度会员后，免费游戏和周边如何选择？
              <span class="faq-toggle">→</span>
            </div>
            <div class="faq-answer">
              购买年度会员后，系统会自动发放游戏兑换券和周边选择券到您的账户，您可以在"会员中心-我的兑换"页面进行选择。
            </div>
          </div>
          <div class="faq-item">
            <div class="faq-question">
              Q4: 会员折扣适用于哪些游戏商品？
              <span class="faq-toggle">→</span>
            </div>
            <div class="faq-answer">
              会员折扣适用于平台上所有付费游戏、DLC、皮肤和虚拟道具，但部分特价商品和第三方发行的游戏可能不参与折扣活动。
            </div>
          </div>
          <div class="faq-item">
            <div class="faq-question">
              Q5: 会员标识会在哪些地方显示？
              <span class="faq-toggle">→</span>
            </div>
            <div class="faq-answer">
              会员标识会在您的个人资料、评论区、发帖和直播等多处显示，让您在社区中彰显尊贵身份，获得更多关注。
            </div>
          </div>
          <div class="faq-item">
            <div class="faq-question">
              Q6: 会员服务是否支持退款？
              <span class="faq-toggle">→</span>
            </div>
            <div class="faq-answer">
              会员服务购买后7天内，如未使用任何会员权益（如领取礼包、使用折扣等），可申请全额退款。7天后或已使用会员权益的情况下，不支持退款。
            </div>
          </div>
        </div>
        <div class="faq-contact">
          <div class="faq-qrcode">
            🎮
          </div>
          <div class="faq-contact-info">
            <p>更多游戏会员问题</p>
            <p>扫描二维码添加客服</p>
            <p>回复「会员」进入VIP玩家群</p>
          </div>
        </div>
      </section>
    </div>

    <!-- 底部购买按钮 -->
    <div class="fixed-bottom">
      <div class="buy-container">
        <div class="price-info">
          <span class="current-price">¥39</span>
          <span class="original-price">¥59</span>
          <span class="price-desc">会员首月特惠</span>
        </div>
        <button class="btn-buy-now">立即开通游戏会员</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MembershipView',
  data() {
    return {
      currentGame: 0,
      carouselInterval: null,
      games: [
        {
          name: '艾尔登法环',
          image: '/src/assets/埃尔登法环.webp',
          comment: '黑魂系列爱好者狂喜！开放世界设计得非常精妙，每个角落都充满惊喜，BOSS战依然那么硬核但又充满成就感。'
        },
        {
          name: '死亡搁浅：导演剪辑版',
          image: '/src/assets/5a5b07566aa2ae5454ac770f47544e64.jpeg',
          comment: '《死亡搁浅：导演剪辑版》由小岛秀夫打造，以其独特的\'联结\'主题和创新玩法闻名。游戏以送货为核心，同时融合了探索、战斗和深刻的叙事元素。'
        },
        {
          name: '赛博朋克2077',
          image: '/src/assets/赛博朋克3.jpg',
          comment: '《赛博朋克2077》的剧情真的太棒了！夜之城的氛围营造得非常出色，角色塑造也很深入人心。'
        }
      ]
    }
  },
  mounted() {
    // 初始化FAQ折叠功能
    this.initFAQ()
    // 启动自动轮播
    this.startAutoCarousel()
  },
  beforeUnmount() {
    // 清理轮播定时器
    this.stopAutoCarousel()
  },
  methods: {
    prevGame() {
      // 暂停自动轮播
      this.stopAutoCarousel()
      this.currentGame = (this.currentGame - 1 + this.games.length) % this.games.length
      // 重新启动自动轮播
      this.startAutoCarousel()
    },
    
    nextGame() {
      // 暂停自动轮播
      this.stopAutoCarousel()
      this.currentGame = (this.currentGame + 1) % this.games.length
      // 重新启动自动轮播
      this.startAutoCarousel()
    },
    
    startAutoCarousel() {
      // 每5秒自动切换到下一张
      this.carouselInterval = setInterval(() => {
        this.currentGame = (this.currentGame + 1) % this.games.length
      }, 5000)
    },
    
    stopAutoCarousel() {
      if (this.carouselInterval) {
        clearInterval(this.carouselInterval)
        this.carouselInterval = null
      }
    },
    
    initFAQ() {
      const faqItems = document.querySelectorAll('.faq-item')
      faqItems.forEach(item => {
        const question = item.querySelector('.faq-question')
        const answer = item.querySelector('.faq-answer')
        const toggle = item.querySelector('.faq-toggle')
        
        // 默认隐藏答案
        answer.style.maxHeight = '0'
        answer.style.opacity = '0'
        answer.style.marginTop = '0'
        
        question.addEventListener('click', () => {
          const isOpen = toggle.textContent === '↓'
          if (isOpen) {
            toggle.textContent = '→'
            answer.style.maxHeight = '0'
            answer.style.opacity = '0'
            answer.style.marginTop = '0'
          } else {
            toggle.textContent = '↓'
            answer.style.maxHeight = answer.scrollHeight + 'px'
            answer.style.opacity = '1'
            answer.style.marginTop = '12px'
          }
        })
      })
    }
  }
}
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: #fff;
  background-color: #121212;
}

/* 导航栏样式 */
.navbar {
  background: rgba(18, 18, 18, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #ff4757;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-link {
  text-decoration: none;
  color: #ffffff;
  font-size: 14px;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #ff4757;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-create {
  background-color: #ff4757;
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-create:hover {
  background-color: #ff3742;
  transform: translateY(-1px);
}

.vip-tag {
  background-color: #ffd700;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
}

/* 主内容区域 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* 游戏推荐轮播 */
.games-carousel-section {
  margin-bottom: 80px;
}

.games-carousel {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.game-slide {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.game-card {
  min-width: 100%;
  position: relative;
}

.game-image-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.game-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.game-card:hover .game-image {
  transform: scale(1.08);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.game-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 40px 20px 20px;
  color: white;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.game-card:hover .game-overlay {
  transform: translateY(0);
  opacity: 1;
}

.game-comment {
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  margin: 0;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.carousel-arrow:hover {
  background-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.1);
}

.carousel-arrow.left {
  left: 20px;
}

.carousel-arrow.right {
  right: 20px;
}

/* 会员特权介绍 */
.privileges-section {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  padding: 60px 20px;
  border-radius: 16px;
  margin-bottom: 80px;
}

.section-header h1 {
  font-size: 36px;
  margin-bottom: 16px;
  color: #fff;
}

.section-header p {
  font-size: 18px;
  color: #cccccc;
  margin-bottom: 48px;
}

.privileges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.privilege-item {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.privilege-item:nth-child(1) { animation-delay: 0.1s; }
.privilege-item:nth-child(2) { animation-delay: 0.2s; }
.privilege-item:nth-child(3) { animation-delay: 0.3s; }
.privilege-item:nth-child(4) { animation-delay: 0.4s; }
.privilege-item:nth-child(5) { animation-delay: 0.5s; }
.privilege-item:nth-child(6) { animation-delay: 0.6s; }

.privilege-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.1);
}

.privilege-icon {
  font-size: 32px;
  margin-bottom: 16px;
}

.privilege-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #fff;
}

.privilege-desc {
  font-size: 14px;
  color: #b0b0b0;
  line-height: 1.6;
}

/* 年度会员专享福利 */
.annual-benefits-section {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 60px 20px;
  border-radius: 16px;
  margin-bottom: 80px;
}

.section-title {
  text-align: center;
  margin-bottom: 48px;
}

.section-title h2 {
  font-size: 28px;
  margin-bottom: 12px;
  color: #fff;
}

.section-title p {
  font-size: 16px;
  color: #cccccc;
  max-width: 800px;
  margin: 0 auto 24px;
  line-height: 1.6;
}

.view-more {
  color: #ff4757;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.view-more:hover {
  color: #ff3742;
}

.benefits-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.book-selection {
  flex-shrink: 0;
}

.book-card {
  background: rgba(255, 215, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  position: relative;
  width: 200px;
}

.book-icon {
  background-color: #ffd700;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  display: inline-block;
}

.book-desc {
  font-size: 16px;
  color: #ffd700;
  line-height: 1.6;
}

.book-plus {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  color: #666;
}

.gifts-selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 24px;
  max-width: 600px;
}

.gift-item {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s;
}

.gift-item:hover {
  transform: translateY(-5px);
}

.gift-image {
  font-size: 48px;
  margin-bottom: 12px;
}

.gift-name {
  font-size: 14px;
  color: #fff;
}

/* 字节内部课VIP会员免费学 */
.bytecourse-section {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 60px 20px;
  border-radius: 16px;
  margin-bottom: 80px;
}

.courses-slider {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s;
  color: #fff;
}

.slider-arrow:hover {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: #ff4757;
  color: #ff4757;
}

.slider-arrow.left {
  left: -20px;
}

.slider-arrow.right {
  right: -20px;
}

.courses-container {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 20px 0;
}

.courses-container::-webkit-scrollbar {
  display: none;
}

.course-card {
  flex: 0 0 280px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: slideInRight 0.6s ease-out;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.course-card:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}

.course-image {
  font-size: 64px;
  margin-bottom: 16px;
}

.course-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
  color: #fff;
}

.course-subtitle {
  font-size: 14px;
  color: #cccccc;
  margin-bottom: 8px;
}

.course-instructor {
  font-size: 12px;
  color: #888;
}

/* 游戏DLC与皮肤折扣 */
.dlc-discount-section {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 60px 20px;
  border-radius: 16px;
  margin-bottom: 80px;
}

.dlc-container {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 20px 0;
}

.dlc-container::-webkit-scrollbar {
  display: none;
}

.dlc-item {
  flex: 0 0 160px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: slideInLeft 0.6s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.dlc-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.dlc-image {
  font-size: 48px;
  margin-bottom: 12px;
}

.dlc-title {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.4;
}

.dlc-tag {
  background-color: #f0f0f0;
  color: #666;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  display: inline-block;
  margin-bottom: 8px;
}

.dlc-vip-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: #ff4757;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
}

/* 常见问题 */
.faq-section {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 60px 20px;
  border-radius: 16px;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto 48px;
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: color 0.3s;
}

.faq-question:hover {
  color: #ff4757;
}

.faq-toggle {
  font-size: 14px;
  transition: transform 0.3s;
  color: #fff;
}

.faq-answer {
  font-size: 14px;
  color: #cccccc;
  line-height: 1.6;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height 0.3s, opacity 0.3s, margin-top 0.3s;
}

.faq-contact {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.faq-qrcode {
  width: 80px;
  height: 80px;
  background-color: #f0f0f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.faq-contact-info {
  text-align: left;
}

.faq-contact-info p {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

/* 底部购买按钮 */
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(18, 18, 18, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 0;
  z-index: 999;
}

.buy-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-info {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.current-price {
  font-size: 24px;
  font-weight: bold;
  color: #ff4757;
}

.original-price {
  font-size: 14px;
  color: #666;
  text-decoration: line-through;
}

.price-desc {
  font-size: 14px;
  color: #fff;
}

.btn-buy-now {
  background-color: #ff4757;
  color: white;
  border: none;
  padding: 12px 48px;
  border-radius: 28px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: pulseButton 2s infinite;
}

@keyframes pulseButton {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.4);
  }
  70% {
    transform: scale(1.03);
    box-shadow: 0 0 0 10px rgba(255, 71, 87, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
  }
}

.btn-buy-now:hover {
  background-color: #ff3742;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  
  .privileges-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .benefits-content {
    flex-direction: column;
  }
  
  .gifts-selection {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .slider-arrow {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  
  .slider-arrow.left {
    left: 0;
  }
  
  .slider-arrow.right {
    right: 0;
  }
  
  .book-card {
    flex: 0 0 240px;
  }
  
  .dlc-container {
    gap: 16px;
  }
  
  .dlc-item {
    flex: 0 0 140px;
    padding: 16px 12px;
  }
}

@media (max-width: 480px) {
  .main-content {
    padding: 20px 16px;
  }
  
  .section-header h1 {
    font-size: 28px;
  }
  
  .section-header p {
    font-size: 16px;
  }
  
  .privileges-grid {
    grid-template-columns: 1fr;
  }
  
  .gifts-selection {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .book-card {
    width: 160px;
    padding: 24px 16px;
  }
  
  .book-plus {
    right: -16px;
    font-size: 24px;
  }
  
  .buy-container {
    flex-direction: column;
    gap: 16px;
  }
  
  .btn-buy-now {
    width: 100%;
  }
}
</style>